<template>
  <div>
    <template v-if="processLogTableData.length > 0">
      <a-table
          :rowKey="(record) => record.id"
          :columns="processLogColumns"
          :dataSource="processLogTableData"
      >
        <template slot="statusSlot" slot-scope="value">
          <div>
            {{statusMatch(value)}}
          </div>
        </template>
        <template slot="assignInfoSlot" slot-scope="value">
          <div>
            {{matchRegString(value)}}
          </div>
        </template>
      </a-table>
    </template>
    <template v-else>
      <a-empty>
        <template slot="image">
          <img src="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg" alt="">
        </template>
        <template slot="description">
          <span>暂无数据</span>
        </template>
      </a-empty>
    </template>
  </div>
</template>

<script>
export default {
  name: "ProcessLog",
  props: {
    processLogTableData: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      processLogColumns: [
        {
          dataIndex: 'taskName',
          title: '节点名称',
          width: 100,
          align: 'center',
          ellipsis: true
        },
        {
          dataIndex: 'approveTime',
          title: '处理时间',
          width: 150,
          align: 'center',
          ellipsis: true
        },
        {
          dataIndex: 'approverName',
          title: '执行人',
          width: 100,
          align: 'center',
          ellipsis: true
        },
        {
          dataIndex: 'assignInfo',
          title: '待执行人',
          width: 150,
          align: 'center',
          ellipsis: true,
          scopedSlots: {customRender: 'assignInfoSlot'}
        },
        {
          dataIndex: 'status',
          title: '状态',
          width: 150,
          align: 'center',
          ellipsis: true,
          scopedSlots: {customRender: 'statusSlot'}
        },
        {
          dataIndex: 'opinion',
          title: '处理意见',
          width: 150,
          align: 'center',
          ellipsis: true
        }
      ]
    }
  },
  methods: {
    statusMatch(text) {
      let nodeText = '';
      switch (text) {
        case 'start':
          nodeText = '开始';
          break;
        case 'reject':
          nodeText = '退回';
          break;
        case 'awaiting_check':
          nodeText = '待审';
          break;
        case 'agree':
          nodeText = '同意';
          break;
        case 'end':
          nodeText = '结束';
          break;
        case 'recall':
        nodeText = '撤回';
        break;
        default:
          nodeText = text;
          break;
      }
      return nodeText;
    },
    matchRegString(string) {
      let name = '';
      if(string && Object.prototype.toString.call(string) === '[object String]') {
        const reg = /[\u4e00-\u9fa5]/g;
        string.match(reg).map(s => {
          name += s;
        });
      }
      return name;
    }
  }
}
</script>

<style scoped>

</style>
